<template>
  <base-paenl>
    <span slot="header">回放查询</span>
    <div slot="main" class="slot-main">
      <div class="area-select">
        <el-select
          size="mini"
          v-model="videoIndex"
          class="area-type"
          placeholder="请选择监控"
          popper-class="area-popper"
        >
          <el-option
            v-for="(item, index) in cameraList"
            :key="item.sbid"
            :label="item.pswz"
            :value="index"
          >
          </el-option>
        </el-select>
      </div>
      <div class="date-groups">
        <el-date-picker
          v-model="start"
          :type="type"
          :clearable="true"
          placeholder="请选择日期"
          size="mini"
          :value-format="format"
          style="width: 188px"
          @change="judgeTimeRang()"
        /><span class="line">—</span>
        <el-date-picker
          v-model="end"
          :type="type"
          :clearable="true"
          placeholder="请选择日期"
          size="mini"
          :value-format="format"
          style="width: 188px"
          @change="judgeTimeRang()"
        />
      </div>
      <div
        :class="
          activeBtn == 'playBack'
            ? 'grid-info-operate-div grid-info-operate-div-active'
            : 'grid-info-operate-div'
        "
        @click="handleClick('playBack')"
      >
        <img
          :src="
            activeBtn == 'playBack'
              ? require('../../assets/images/panels/chakanhuifang-hou.png')
              : require('../../assets/images/panels/chakanhuifang-qian.png')
          "
          width="18px"
          height="15px"
          style="margin: 2px 10px 0px 0px"
        />查看回放
      </div>
    </div>
  </base-paenl>
</template>

<script lang="ts">
import { Vue, Component, Watch } from "vue-property-decorator";
import BasePaenl from "./CBase.vue";

@Component({
  name: "PlayBack",
  components: { BasePaenl },
})
export default class extends Vue {
  get equipmentData() {
    return this.$store.getters["videoData/equipmentData"];
  }

  @Watch("equipmentData")
  handleEquipmentData(val: any) {
    this.init(val);
  }

  cameraList: any = [];
  activeBtn = "";
  start = "";
  end = "";
  format = "yyyy-MM-dd HH:mm:ss";
  type = "datetime";
  videoIndex: any = "";
  mounted() {
    this.init(this.equipmentData);
  }
  //初始化
  init(val: any) {
    try {
      this.videoIndex = "";
      if (!val) {
        return this.$message.warning("该区域无监控设备");
      }
      this.cameraList = val.jksbList ? val.jksbList : [];
      if (!this.cameraList.length) return;
      // this.videoIndex = 0;
    } catch (error) {
      console.log(error);
    }
  }
  judgeTimeRang() {
    console.log(this.start, this.end);
  }
  handleClick(type: string) {
    if (!this.cameraList.length) return;
    const item = this.cameraList[this.videoIndex];
    if (!item) return this.$message.warning("请选择监控");
    this.activeBtn = type;
    this.$store.commit(
      "videoData/setVideoTitle",
      `${item.pswz || "视频"}-回放`
    );
    this.$store.commit("videoPanel/setDialogShow", true);
    this.$store.commit("videoPanel/setDialog", "InspetionVideo");
    this.$store.commit("videoData/setPanelWindowNum", 1);
    this.$store.commit("videoData/setVideoCodeArr", [item.sbid]);
    this.$store.commit("videoData/setVideoType", {
      start: this.start,
      end: this.end,
      type: "playBack",
    });
  }
}
</script>

<style lang="scss" scoped>
.slot-main {
  height: 205px;
  .area-type {
    width: 100%;
  }
}
</style>
<style lang="scss">
.date-groups {
  display: flex;
  align-items: center;
  margin-top: 16px;
  .line {
    color: #1658a0;
    padding: 0px 2px 4px 2px;
  }
}
.el-input__inner {
  background-color: #001022;
  border-radius: 4px;
  border: solid 1px #1658a0;
  font-family: AlibabaPuHuiTi_2_45_Light;
  font-size: 14px;
  line-height: 30px;
  color: #ffffff;
}
.el-time-panel__btn {
  color: #fff;
}
.el-input--suffix .el-input__inner {
  padding-right: 20px;
}
.el-picker-panel,
.el-time-panel {
  background-color: #001022;
  color: #ffffff;
}
.el-time-spinner__item:hover:not(.disabled):not(.active) {
  background-color: transparent;
}
.el-date-picker__header-label,
.el-time-spinner__item.active:not(.disabled) {
  color: #ffffff;
}
.el-picker-panel,
.el-date-picker__time-header,
.el-time-panel,
.el-picker-panel__footer {
  border: solid 1px #1658a0;
}
.el-button--default {
  background: #114986;
  border: 1px solid #0f4179;
  color: #fff;
}
.el-picker-panel__footer {
  background-color: #001022;
}
.el-date-table th {
  color: #ffffff;
}
.el-picker-panel__icon-btn,
.el-time-spinner__item {
  color: #ffffff;
}
.grid-info-operate-div {
  width: 100%;
  height: 32px;
  margin-top: 32px;
  background: url("../../assets/images/panels/guijihuifanganniubeijingqian.png");
  background-size: 100% 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: AlibabaPuHuiTi_2_75_SemiBold;
  font-size: 14px;
  color: #ffffff;
  cursor: pointer;
}
.grid-info-operate-div-active {
  background: url("../../assets/images/panels/guijihuifanganniubeijinghou.png");
  background-size: 100% 100%;
  color: #08ebff;
}
</style>
